3.5 KB · ⇊ 3 parts · ⤓ Micron 3.5 KB · ⤓ HTML 29.2 KB

top

CSS-in-JS is a styling technique by which JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a <style> element) and attached into the DOM. It enables the abstraction of CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. There are multiple implementations of this concept in the form of libraries such as

• Emotioncite-ref-1[1]

• Styled Componentscite-ref-2[2]

• JSScite-ref-3[3]

• Tailwind CSS

These libraries allow the creation of styled components using tagged template literals. For example, using styled components in a React project would look like the following:

Some outcomes that may be achieved through CSS-in-JS can not be obtained using traditional CSS techniques. It is possible to make the styles dynamic in line with just a few conditional statements. Programmers may also write more modular code, with CSS being encapsulated in the same block as the programmer's JavaScript, scoping it to that module only.

• Industry use

• References

CSS-in-JS is used by Reddit, Patreon, Target, Atlassian, Vogue, GitHub and Coinbase.cite-ref-4[4]

cite-note-11. ↑ "Emotion - Introduction". emotion.sh. Retrieved 2019-07-03.

cite-note-22. ↑ citerefstyled-componentsstyled-components. "styled-components". styled-components. Retrieved 2019-07-03.

cite-note-33. ↑ "JSS". cssinjs.org. Retrieved 2019-07-03.

cite-note-44. ↑ "A Detailed Explanation of CSS-in-JS". Alibaba Cloud Community. Retrieved 2023-07-05.